<template>
    <div class="content">
        
        <TableLayout form-title=""> 
             <el-form :model="formInline" class="formInline" label-width="90px" slot="form"  v-collapse="true">          
                 <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41"> 
                    <el-col :span="8">
                        <el-form-item label="负责人姓名">
                            <el-popover placement="top-start" trigger="focus" content="字符长度不大于6个">
                                    <el-input v-model="formInline.leaderName" placeholder="请输入内容" :maxlength="6" slot="reference"></el-input>
                            </el-popover>     
                        </el-form-item>
                    </el-col> 
                     <el-col :span="8">
                        <el-form-item label="银行卡号">
                            <el-popover placement="top-start" trigger="focus" content="字符长度不大于19个">
                                <el-input v-model="formInline.bankCard" placeholder="请输入内容" :maxlength="19" slot="reference"></el-input>
                            </el-popover>    
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="银行账户名">
                            <el-popover placement="top-start" trigger="focus" content="字符长度不大于12个">
                                <el-input v-model="formInline.bankName" placeholder="请输入内容" :maxlength="12" slot="reference"></el-input>
                            </el-popover>    
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="申请日期">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>             
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="formInline.typeStatus" style="width:100%" >
                                <el-option v-for="item in statusType" :key="item.typeStatustId" :label="item.statusName" :value="item.typeStatustId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <div class="withdrawals" slot = "showPanel">
                <el-row :gutter="41">
                    <el-col :span="12">昨日结算（元）：<span style="margin-left:5px;">{{yesterday? yesterday.convertMoney: '--'}}</span></el-col>
                    <el-col :span="12">累计结算金额（元）：<span style="margin-left:5px;">{{addUp? addUp.convertMoney: '--'}}</span></el-col>
                </el-row>
            </div>


            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="goToAddRole">批量完成</el-button>
                    <el-button  @click="exportBtn">导出</el-button>
                </div>
            </div>
            <el-table ref="multipleTable" :data="dataApply" border style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">

                <el-table-column type="selection" width="55" :selectable="selectable" align="center"></el-table-column>
                
                <el-table-column align="center" prop="applicationDate" label="申请日期"></el-table-column>

                <el-table-column align="center" prop="account" label="用户名"></el-table-column>

                <el-table-column align="center" prop="headName" label="负责人">
                                    
                </el-table-column>

                <el-table-column align="center" prop="userId"  label="代理区域" width="90">
                    <template scope="scope">
                        <el-button type="text" class="btn-success"  @click="goDetail(scope.row.userId)">详情</el-button>
                    </template>   
                </el-table-column>

                <el-table-column align="center" prop="phone"  label="手机号" width="110">
                    <template scope="scope">
                        <span>{{scope.row.phone || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="money"  label="结算金额"></el-table-column>

                <el-table-column align="center" prop="bankAccountName"  label="银行账户名" width="100">
                    <template scope="scope">
                        <span>{{scope.row.bankAccountName || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="bankCardNumber"  label="银行卡号">
                    <template scope="scope">
                        <span>{{scope.row.bankCardNumber || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="affiliatedBank"  label="所属银行">
                    <template scope="scope">
                        <span>{{scope.row.affiliatedBank || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="bankOfAccounts"  label="开户行"></el-table-column>

                <el-table-column align="center"  label="结算状态">
                    <template scope="scope">
                        <span v-if="scope.row.status=='0'">未审核</span>
                        <span v-if="scope.row.status=='1'">处理中</span>
                        <span v-if="scope.row.status=='2'|| scope.row.status=='4'">已驳回</span>
                        <span v-if="scope.row.status=='3'">已结算</span>
                    </template>
                </el-table-column>
    
                <el-table-column align="center" label="完成时间">
                    <template scope="scope">
                        <span>{{scope.row.applyTime || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="applyUserName"  label="操作人" width="80">
                    <template scope="scope">
                        <span>{{scope.row.applyUserName || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="操作" width="200">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="adoptBtn(scope.row)" v-if="scope.row.status=='0'">通过</el-button>
                        <el-button type="text" class="btn-success" @click="refuse(scope.row)" v-if="scope.row.status=='0'">拒审</el-button>
                        <el-button type="text" class="btn-success" @click="successBtn(scope.row)" v-if="scope.row.status=='1'">完成</el-button>                    
                        <el-button type="text" class="btn-success" @click="failBtn(scope.row)" v-if="scope.row.status=='1'">失败</el-button>
                        <el-button type="text" class="btn-success" @click="checked(scope.row)" v-if="scope.row.status=='2'|| scope.row.status=='4'">查看原因</el-button>
                        <el-button type="text" class="btn-success" @click="checkDetails(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>    
            </el-table>
            <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
            </div>
        </TableLayout>

        <rejectCheck :dialog="dialog"  @addSuccess='addSuccess' @reviseSuccess='reviseSuccess' ref='addSchoolLeader' ></rejectCheck>

        <el-dialog title="查看原因" :visible.sync="dialogFormVisible4" size="tiny">
            <div class='checkReson'>
                {{reasonContent}}
            </div>
            <div slot="footer" class="dialog-footer3">
                <el-button type="primary" @click="dialogFormVisible4=false">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="查看代理区域" :visible.sync="dialogFormVisible3" size="tiny">
            <div>
                <table class='dialogTable3' align="left">
                    <tr v-for='(item,index) in areaList' :key="index"><td>代理区域{{index+1}}</td><td>{{item.provinceName}}<span v-if="item.cityName">{{'-'+item.cityName}}</span><span v-if="item.areaName">{{'-'+item.areaName}}</span></td></tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer3">
                <el-button type="primary" @click="dialogFormVisible3=false">确定</el-button>
            </div>
        </el-dialog>

        
        
    </div>
</template>

<script>
import TableLayout from 'components/TableLayouts';
// import TableLayoutes from 'components/TableLayoutes';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import moment from 'moment';
import { getYesterdaySettlement, getAccumulatedSum, updateBatchSettlementInfo, updateSettlementInfo, listSettlementAgentData, listAgentProvinces} from 'api/settleManagement';
import rejectCheck from './rejectCheck';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import Cookies from 'js-cookie';
export default{
    name: 'agentSettle',
    components: {TableLayout, rejectCheck, province, city, region},
    data() {
        return {
            yesterday: {
                convertMoney: ''
            },
            addUp: {
                convertMoney: ''
            },
            // yesterday: '',
            // addUp: '',
            formInline: {// form表单数据
                leaderName: '',
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                typeStatus: '',
                bankCard: '',
                bankName: '',
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间
                pickerOptions1: {},
                pickerOptions2: {}
            },
            areaList: [],
            dialogVisible: false,
            dialog: {
                dialogFormVisible1: false,
                dialogFormVisible2: false
            },
            statusType: [
                {
                    typeStatustId: '',
                    statusName: '请选择'
                },
                {
                    typeStatustId: '0',
                    statusName: '未审核'
                }, 
                {
                    typeStatustId: '1',
                    statusName: '处理中'
                },
                {
                    typeStatustId: '2',
                    statusName: '已驳回'
                },
                {
                    typeStatustId: '3',
                    statusName: '已结算'
                }],
            dataApply: [],
            multipleSelection: [],
            dialogFormVisible3: false,
            dialogFormVisible4: false,
            reasonContent: '',
            loading: false,
            listQuery: {// 分页
                page: 1,
                total: 0
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
     // 初始化
    created() {
        this.searchFetchData();
        this.searchData();
        // this.getSchoolType()
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 
        searchData() { 
            getYesterdaySettlement().then(response => {
                this.yesterday = response.data.content;
                if (this.yesterday) {
                    this.yesterday.convertMoney = parseFloat(this.yesterday.money).toFixed(2);
                }
                
            
            });
            getAccumulatedSum().then(response => {
                this.addUp = response.data.content;
                if (this.addUp) {
                    this.addUp.convertMoney = parseFloat(this.addUp.money).toFixed(2);
                }
                
            });
        },
        // 查询列表
        searchFetchData() {
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD');
            this.loading = true; 
            listSettlementAgentData(this.formInline.fProvinceId, 
            this.formInline.fCityId, this.formInline.fAreaId, startDate, endDate, this.formInline.typeStatus,
            this.formInline.leaderName, this.formInline.bankCard, this.formInline.bankName, this.listQuery.page, this.config.pageSize).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;  
            });
        },
        // 筛选框选择
        selectable(rows) {
            return rows.status === '1';
        },
        // 批量完成
        goToAddRole() {
            if (this.multipleSelection.length<=0) {
                this.$message({
                    message: '请选择要完成的信息!'
                })
            }
            let roleIds = [];
            for (let i=0;i<this.multipleSelection.length;i++) {
                roleIds.push(this.multipleSelection[i].pId); 
            }
            if (roleIds.length == 0) {
                return;
            }
            this.$confirm('此操作将批量完成所选信息, 是否继续?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateBatchSettlementInfo(roleIds).then(response => {
                    this.searchData();
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                });  
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
              
        // 表单查询
        onSubmit() {
            this.listQuery.page = 1;
            this.loading = true;
            this.searchFetchData();
        },
        
        // 导出
        exportBtn() {
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD');
            let Token = Cookies.get('accessToken');
            window.location.href = `${LOCAL_API.wss}/settlementAgent/exportSettlementAgentData?provinceId=${this.formInline.fProvinceId}&cityId=${this.formInline.fCityId}&areaId=${this.formInline.fAreaId}&applicationStartDate=${startDate}&applicationEndDate=${endDate}&status=${this.formInline.typeStatus}&headName=${this.formInline.leaderName}&bankCardNumber=${this.formInline.bankCard}&bankAccountName=${this.formInline.bankName}&AccessToken=${Token}`;
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
         // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() -864e5;
                }
            }
        },
        // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() - 864e5;
                }
            }
        },

        addSuccess() {
            this.dialog.dialogFormVisible1=false;
            this.searchFetchData();
        },
        reviseSuccess() {
            this.dialog.dialogFormVisible2=false;
            this.searchFetchData();
        },


        // 查看代理区域
        goDetail(userId) {
            this.dialogFormVisible3=true;
            listAgentProvinces(userId).then(response => {
                this.areaList = response.data.content;
            })
        },

        // 通过
        adoptBtn(item) {
            // console.log('11', item);
            this.$confirm('确定要通过?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateSettlementInfo(item.cashId, item.pId, item.orgAccountId, 1).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                });  
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        
        // 完成
        successBtn(item) {
            this.$confirm('确定要完成打款?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateSettlementInfo(item.cashId, item.pId, item.orgAccountId, 3).then(response => {
                    this.searchData();
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                });  
            }).catch(() => {
                this.$message.info('已取消');
            });
        },

        // 查看
        checked(row) {
            this.dialogFormVisible4 = true;
            this.reasonContent = row.reason;
        },
         // 失败
        failBtn(row) {
            // console.log(this.dialog.dialogFormVisible2);
            this.dialog = {
                dialogFormVisible2: true,
                cashId: row.cashId,
                pid: row.pId,
                orgId: row.orgAccountId
            }
        },
        // 查看详情
        checkDetails(row) {
            this.$router.push({
                path: `checkDetails/${row.pId}`
            });
        },
        // 拒审
        refuse(row) {
            // console.log(this.dialog.dialogFormVisible1);
            // this.dialog.pid = row.schoolId;
            // this.dialog.dialogFormVisible1=true;
            this.dialog = {
                dialogFormVisible1: true,
                cashId: row.cashId,
                pid: row.pId,
                orgId: row.orgAccountId
            }


        }
      
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .withdrawals{
        width:100%;
        background:#fff;
        padding:30px 100px;
        margin:20px 0;
        box-shadow: 0px 1px 2px #999;
        -webkit-box-shadow: 0px 1px 2px #999;
        .el-col{
            text-align:left;
            span{
                margin-left:10px;
                font-size:18px;
                display:inline-block;
            }
        }
    }
    .region{
        p{
            border:1px solid #ccc;
            padding:8px 0px;
            text-align:center;
            margin-top:2px;
        }
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .dialog-footer3{
        .el-button{
            margin: 50px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable3{
        text-align:center;
        margin-top:30px;
        margin:30px 50px;
        tr td:nth-of-type(1){
            width:30%;
        }
        tr td:nth-of-type(2){
            width:310px;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            width:220px;
            height:40px;
        }
    }
    .checkReson{
        padding:50px;
    }
}
</style>      
                              

